<template>
    <div class="app-container">
        
                <!-- 搜索表单 -->
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px">            
            <el-form-item label="插件名称:" prop="name">
                <el-input
                v-model="queryParams.name"
                placeholder="请输入名称字符串"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>


        <!-- 表工具栏 新增删除等 -->
        <el-row :gutter="20" class="mb8">
            <el-col :span="1.5">
                <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                v-hasPermi="['kong:routes:add']"                
                >{{addBtnText}}</el-button>
            </el-col>

            <el-col :span="1.5">
                    <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    :loading="exportLoading"
                    @click="handleExport"
                    v-hasPermi="['kong:routes:export']"
                >导出</el-button>
            </el-col>

            <right-toolbar :showSearch.sync="showSearch" @queryTable="getPluginsList()"></right-toolbar>

        </el-row>

        <div v-if="OpenPluginsTable">
            <el-table v-loading="loading" :data="plugins">
                <el-table-column label="插件名称" align="center" prop="name"></el-table-column>                
                <el-table-column label="范围" align="center" prop="scope"></el-table-column>          
                <el-table-column label="应用名称" align="center" prop="applyObject.name"></el-table-column>
                <el-table-column label="支持协议" align="center" prop="protocols">
                    <template slot-scope="scope">
                        <span v-for="item in scope.row.protocols" :key="item">
                            {{item}},
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="是否启用" align="center" prop="enabled">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.enabled" inactive-color="#ff4949" @change="headlePluginStatusChange(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="id" align="center" prop="id"></el-table-column>
                <el-table-column label="标签" align="center" prop="tags"></el-table-column>   
                <el-table-column label="创建时间" align="center" prop="created_at" :formatter="dateFormat"></el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"   
                            type="text"
                            icon="el-icon-add"
                            @click="handleDelete(scope.row)">
                            删除</el-button>

                        <el-button
                            size="mini"   
                            type="text"
                            icon="el-icon-add"
                            @click="handleUpdate(scope.row)">
                            编辑</el-button>

                    </template>
                </el-table-column>     
            </el-table>
        </div>    
        <div v-else>
            <plugin-list/>
        </div>

        
        <el-dialog :visible.sync="open"  append-to-body  v-if="open" >
            <plugin-schema :operate="operate" :pluginName='pluginName' :plugin='pluginObject' @callback="handleAddPluginCallback" />
        </el-dialog>

    </div>
</template>

<script>

import PluginList from "../components/pluginList";
import {PluginsList,kongPluginDelete,kongPluginUpdate} from "@/api/kong/plugins"
import PluginSchema from '../components/pluginSchema'
import moment from 'moment'

export default {
    components:{PluginList,PluginSchema},
    props:{
        pluginEntitys:{
            type: Array,
            required: false,
        }

    },
    data () {
        return {
            // 打开 pluginlist  界面标识
            OpenPluginsTable: true,
            // 已配置 plugins 列表
            plugins:[],
            loading: false,
            single:true,
            multiple:false,
            exportLoading: false,
            showSearch: true,
            // 查询条件
            queryParams:{
                pageNum: 1,
                pageSize: 10,
                //主机
                name:null

            },
            // 新增按钮 显示名称
            addBtnText:"新增全局插件",
            // 是否打开插件详情页面 
            open: false,
            // 编辑插件 
            operate: "edit",
            // 插件实体
            pluginObject: null,
            // 插件名称
            pluginName: "",
            
        }
    },
    created(){ 
        if(this.pluginEntitys){
            console.log("pluginEntitys:"+JSON.stringify(this.pluginEntitys))
            this.plugins= this.pluginEntitys || this.plugins
        }else{
            this.getPluginsList();
        }   
    },
    mounted () {            
    },
    methods: {
        getPluginsList(){
            PluginsList().then(res=>{
                this.plugins=res.rows;
                // console.log(JSON.stringify(this.plugins));
            }).catch(err=>{});
        },
        pluginsOpenTest(){
            // this.msgSuccess("打开插件列表");
        },
        handleEnablePlugin(){

        },
        handleQuery(){},
        resetQuery(){},
        handleAdd(){
            this.OpenPluginsTable=!this.OpenPluginsTable;
            if(this.OpenPluginsTable){
                this.addBtnText="新增全局插件"
            }else{
                this.addBtnText="返回"
            }
            this.getPluginsList();
        },
        handleUpdate(row){
            // console.log("编辑插件："+JSON.stringify(row))
            this.pluginObject = row;
            this.pluginName=row.name;
            this.open=true;
            
        },
        handleDelete(row){
            this.$confirm('是否确认删除服务编号为："' + row.name + '"的数据项?', "警告",{
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function(){
                kongPluginDelete(row.id);
            }).then(res=>{
                this.msgSuccess("删除插件成功:"+row.name);
                this.getPluginsList();
            })
        },
        handleExport(){},
        handleAddPluginCallback(data){
            console.log("handleAddPluginCallback:"+JSON.stringify(data));
            this.open=false;
            this.getPluginsList();
        },
        headlePluginStatusChange(data){
            this.$confirm('是否确定要修改该插件状态?',"警告",{
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function(){
                kongPluginUpdate(data);
            }).then(res=>{
                this.getPluginsList();
                this.msgSuccess("服务返回成功")
            }).catch(err=>{
                this.msgSuccess(err);
            })
        },
        //时间处理函数
        dateFormat(row, column){
            const _date = row[column.property]*1000; 
            if(_date ==undefined){return ''};
            return moment(_date).format("YYYY-MM-DD HH:mm:ss");
        },
    }
}
</script>
<style scoped>

</style>